<script setup name="Login">
import { useLoginData } from './hooks/useLoginData'
const {
  loginForm,
  handleToRegister,
  handleToLogin,
  loading,
  handlePwdInput,
  loginFormRef,
  pwdState } = useLoginData()

const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
  ]
}
</script>
<template>
  <view class="login-container">
    <up-card title="账号登录"
             title-size="40rpx"
             :head-border-bottom="false"
             :foot-border-top="false"
             :head-style=" {
               marginTop: '30rpx'
             }"
    >
      <template #body>
        <up-form
            errorType="toast"
            labelPosition="left"
            :model="loginForm"
            :rules="rules"
            ref="loginFormRef"
        >
          <up-form-item
              prop="username"
          >
            <up-input
                placeholder="请输入账号"
                prefixIcon="account"
                v-model="loginForm.username"
                prefixIconStyle="font-size: 22px"
            ></up-input>
          </up-form-item>
          <up-form-item
              prop="password"
          >
            <up-input
                placeholder="请输入密码"
                prefixIcon="lock"
                :type="pwdState.type"
                prefixIconStyle="font-size: 22px"
                v-model="loginForm.password"
            >
              <template #suffix>
                <up-icon @click="handlePwdInput" :name="pwdState.icon" size="20" color="#999"></up-icon>
              </template>
            </up-input>
          </up-form-item>
        </up-form>
      </template>
      <template #foot>
        <up-button type="primary" :loading="loading" @click="handleToLogin" text="登录"></up-button>
        <view class="footer-tips">
          <text>还没有账号?</text>
          <view class="u-link" @click="handleToRegister"  >去注册</view>
        </view>
      </template>
    </up-card>
  </view>
</template>

<style lang="scss">
uni-page-body {
  background-color: $u-primary-light;
  padding-top: 120rpx;
  display: flex;
  justify-content: center;
  height: 100%;
}
.login-container {
  display: flex;
  align-items: flex-start;
  width: 90%;
  :deep(.u-card) {
    margin: 0 auto !important;
    width: 100%;
    min-height: 350px;
  }
  .footer-tips {
    display: flex;
    margin-top: 30rpx;
    justify-content: flex-end;
    align-items:center;
    :deep(.u-link) {
      flex: unset !important;
      margin-left: 10rpx;
      color: $u-primary;
    }
  }
}
</style>
